
import {useNavigate} from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux';
import { increment } from '../store/counterSlice';
import  {index} from '../api/api'; 
import { useEffect } from 'react';
import { Button } from 'antd';
import {FileExcelOutlined,CodeSandboxOutlined} from '@ant-design/icons'
function Home() {
    const count = useSelector(state => state.counter);
    const dispatch = useDispatch();
  
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/about');
    }
    
    // 页面初始化加载数据
    useEffect(() => {
        console.log('页面初始化');
        // index().then(res => {
        //     console.log(res);
        // }).catch(error => {
        //     console.error('数据加载失败:', error);
        // });
        return () => {
            console.log('页面销毁');
        }
    },[]); // 空依赖数组确保只在组件挂载时执行一次
    
    return (
        <div className="App">
            <header className="App-header">
                <p>
                我是首页
                </p>
                <button onClick={handleClick}>about</button>
            </header>
            <div>
                <p>当前：{count}</p>
                <button onClick={() => dispatch(increment())}>+1</button>
            </div>
            <Button type="primary" onClick={() => alert('Hello Antd!')}>
                Click Me
            </Button>
            <div style={{marginTop: 16}}> 
                <FileExcelOutlined style={{marginRight: 8}} />
                <CodeSandboxOutlined />
            </div>
            
        </div>
    )
}

export default Home